import Wsl from './Wsl'
import Setting from './Setting'
import About from './About'
import { Routes, Route } from 'react-router-dom'
import { MinusOutlined, CloseOutlined } from '@ant-design/icons'
import { Image, Switch } from 'antd'
import GlobalContext from './GlobalContext.jsx'
import '../assets/content.css'
import icon from '../../../../build/icon.png'

const { defaultLng, winOpt, switchLng, getSetting } = window.api.common

function Content() {
  return (
    <GlobalContext.Consumer>
      {(context) => {
        return (
          <div className="content">
            <div className="tool-bar">
              <div className="tool-bar-title">
                <Image
                  style={{
                    width: '22px',
                    height: '22px',
                    borderRadius: '50%'
                  }}
                  preview={false}
                  src={icon}
                />
                <div>WSL Assistant</div>
              </div>
              <div className="tool-bar-funcs">
                <div className="tool-bar-funcs-language">
                  <Switch
                    checkedChildren="中文"
                    unCheckedChildren="English"
                    defaultChecked={defaultLng()}
                    onChange={(checked) => {
                      switchLng(context, checked)
                    }}
                  />
                </div>
                <div className="tool-bar-funcs-item" onClick={() => winOpt('winMini')}>
                  <div className="tool-bar-func-item-inner">
                    <MinusOutlined style={{ width: '10px', height: '10px' }} />
                  </div>
                </div>
                <div className="tool-bar-funcs-item" onClick={() => winOpt('winClose')}>
                  <div className="tool-bar-func-item-inner">
                    <CloseOutlined style={{ width: '10px', height: '10px' }} />
                  </div>
                </div>
              </div>
            </div>
            <div className="content-area">
              <Routes>
                <Route path="/" element={<Wsl />} />
                <Route path="/setting" element={<Setting />} />
                <Route path="/about" element={<About />} />
              </Routes>
            </div>
          </div>
        )
      }}
    </GlobalContext.Consumer>
  )
}

export default Content
